<template>
    <ElTable class="list-table is-border" height="700" :="$attrs" border :data="data">
        <ElTableColumn label="记录详情" align="center" width="130">
            <template #default="{ row }">
                <div>
                    <div @click="openGjjlDetails(row)">
                        <span class="fileNameClass">查看</span>
                    </div>
                </div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="客户名称" prop="zxkhmc" align="center" width="300"></ElTableColumn>
        <ElTableColumn label="跟进方式" prop="gjfsVal" align="center" width="150"></ElTableColumn>
        <ElTableColumn label="跟进内容" prop="bjmxjqt" align="center" width="300"></ElTableColumn>
        <ElTableColumn label="跟进时间" prop="gjsj" align="center" width="150"></ElTableColumn>
        <ElTableColumn label="下次跟进时间" prop="xcgjsj" align="center" width="150"></ElTableColumn>
        <ElTableColumn label="图片" prop="fileNewEntityList" align="center" width="370">
            <template #default="{ row }">
                <div v-if="row.fileNewEntityList && row.fileNewEntityList.length" class="image-preview-container">
                    <div v-for="(file, index) in filterImageFiles(row.fileNewEntityList)" :key="index"
                        class="image-item">
                        <div @click="openFilewImage(row, file)">
                            <img :src="file.sysFileEntity.fileUrl" :alt="file.sysFileEntity.fileName"
                                class="thumbnail-image" />
                        </div>
                    </div>
                </div>
                <span v-else>无图片</span>
            </template>
        </ElTableColumn>
        <ElTableColumn label="附件" prop="fileNewEntityList" align="center" width="370">
            <template #default="{ row }">
                <div v-if="row.fileNewEntityList && row.fileNewEntityList.length">
                    <div v-for="(file, index) in filterNonImageFiles(row.fileNewEntityList)" :key="index">
                        <div @click="openFilewPreview(file)">
                            <span class="fileNameClass">{{ file.sysFileEntity.fileName }}</span>
                        </div>
                    </div>
                </div>
                <span v-else>无附件</span>
            </template>
        </ElTableColumn>
        <ElTableColumn label="创建人" prop="createUserName" align="center"></ElTableColumn>
        <ElTableColumn label="创建时间" prop="createTime" align="center" width="220"></ElTableColumn>
    </ElTable>
    <ElImageViewer v-if="previewVisible" @close="closePreview" :url-list="srcList_fileImg"
        :initial-index="selectedIndex" />

        <GjjlDetails :gjjlDetailsObj="gjjlDetailsObj"></GjjlDetails>
   
</template>

<script setup lang="ts">
import { ElTableColumn } from 'element-plus';
import { computed, ref, reactive } from 'vue'
import GjjlDetails from './GjjlDetails.vue'


defineProps({
    data: {
        type: Array,
        default: () => [],
    },
    hiddenColumns: {
        type: Object,
        default: () => ({}),
    },
});

const gjjlDetailsObj = reactive({
    isShow: false,
    zxid: ''
});


// 过滤出图片文件
const filterImageFiles = (files: any[]) => {
    if (!files) return [];
    return files.filter(file => {
        const fileType = file.sysFileEntity.fileType?.toLowerCase();
        return ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'].includes(fileType);
    });
};

// 过滤出非图片文件
const filterNonImageFiles = (files: any[]) => {
    if (!files) return [];
    return files.filter(file => {
        const fileType = file.sysFileEntity.fileType?.toLowerCase();
        return !['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'].includes(fileType);
    });
};

// 图片预览
const previewVisible = ref(false)
const selectedIndex = ref(0);
const srcList_fileObj = ref([])
const srcList_fileImg = ref([])

const openFilewImage = async (row, file) => {
    console.log(row);
    console.log(file);

    const imageList = filterImageFiles(row.fileNewEntityList);

    srcList_fileObj.value = [];
    srcList_fileImg.value = [];

    for (let i = 0; i < imageList.length; i++) {
        srcList_fileObj.value.push(imageList[i]);
        srcList_fileImg.value.push(imageList[i].sysFileEntity.fileUrl);
    }

    for (let i = 0; i < srcList_fileObj.value.length; i++) {
        if (srcList_fileObj.value[i].ykfFileId === file.ykfFileId) {
            selectedIndex.value = i;
            previewVisible.value = true;
            return;
        }
    }
}

const openGjjlDetails = async (row) => {
    gjjlDetailsObj.zxid = row.zxid;
    gjjlDetailsObj.isShow = true;
}

const openFilewPreview = (file) => {
    window.open('http://47.96.100.131:8012/onlinePreview?url=' + encodeURIComponent(btoa(file.sysFileEntity.fileUrl)));
}

const closePreview = () => {
    previewVisible.value = false;
}


</script>

<style scoped lang="scss">
.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.image-item {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.thumbnail-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
        transform: scale(1.05);
    }
}

.file-link {
    color: var(--el-color-primary);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

.fileNameClass {
    color: #094DB2;
    /* 设置字体颜色 */
    text-decoration: none;
    /* 默认无下划线 */
    cursor: pointer;
    /* 鼠标悬停时显示小手 */

    /* 鼠标悬停时的样式 */
    &:hover {
        text-decoration: underline;
        /* 添加下划线 */
    }
}
</style>